import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export class ThreeModal {
  mouse: THREE.Vector2;
  raycaster: THREE.Raycaster;
  container: HTMLElement;
  camera: THREE.PerspectiveCamera;
  scene: THREE.Scene;
  defaultColors: string[];
  containerBox: any;
  containerCoord: {
    center: Pick<THREE.Vector3, 'x' | 'y' | 'z'>;
    scale: Pick<THREE.Vector3, 'x' | 'y' | 'z'>;
  } = {
    center: {
      x: 0,
      y: 0,
      z: 0,
    },
    scale: {
      x: 0,
      y: 0,
      z: 0,
    },
  };
  mesh: THREE.Mesh[];
  renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer();
  downObj: any;
  INTERSECTED: any;

  boxList: any[];
  palletList: any[];
  lastPick: any;

  constructor(container: HTMLElement, options: any) {
    this.container = container;
    this.boxList = options.boxList || [];
    this.palletList = options.palletList || [];

    this.init();
  }

  init() {
    this.mouse = new THREE.Vector2();
    this.raycaster = new THREE.Raycaster();

    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0x888888);

    const geometry = new THREE.BoxGeometry(100, 100, 100);
    const ball = new THREE.SphereGeometry(30, 100, 300);
    //创建一个材质对象Material
    //MeshLambertMaterial受光照影响
    const material = new THREE.MeshLambertMaterial({
      color: 0xff0000,
      transparent: true,
      opacity: 0.6,
    });
    const material2 = new THREE.MeshLambertMaterial({
      color: 0x00ff00,
      transparent: true,
      opacity: 0.6,
    });
    // const material = new THREE.MeshBasicMaterial({
    //   color: 0xff0000, //0xff0000设置材质颜色为红色
    // });

    //点光源：两个参数分别表示光源颜色和光照强度
    // 参数1：0xffffff是纯白光,表示光源颜色
    // 参数2：1.0,表示光照强度，可以根据需要调整
    const pointLight = new THREE.PointLight(0xffffff, 2);
    pointLight.decay = 0.0; //设置光源不随距离衰减
    //点光源位置
    pointLight.position.set(400, 500, 300); //点光源放在x轴上

    const axesHelper = new THREE.AxesHelper(150);
    this.scene.add(axesHelper);
    this.scene.add(pointLight);

    // 两个参数分别为几何体geometry、材质material
    const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    const mesh2 = new THREE.Mesh(geometry, material2);
    this.camera = new THREE.PerspectiveCamera(
      30,
      this.container.clientWidth / this.container.clientHeight,
      1,
      2000
    );

    //设置网格模型在三维空间中的位置坐标，默认是坐标原点
    // 网格模型位置xyz坐标：0,10,0
    mesh.position.set(50, 50, 50);
    mesh2.position.set(50, 160, 50);
    // 相机位置xyz坐标：200, 200, 200
    this.camera.position.set(400, 400, 400);
    this.camera.lookAt(mesh.position); //指向mesh对应的位置
    this.scene.add(mesh);
    this.scene.add(mesh2);
    const _containerBox = new THREE.Box3();
    _containerBox.setFromCenterAndSize(
      new THREE.Vector3(100, 100, 100),
      new THREE.Vector3(200, 200, 200)
    );

    const containerBoxHelper = new THREE.Box3Helper(_containerBox, 0x000000);
    this.scene.add(containerBoxHelper);

    console.log(this.scene);

    this.renderer.setSize(
      this.container.clientWidth,
      this.container.clientHeight
    );
    this.renderer.render(this.scene, this.camera);
    this.container.appendChild(this.renderer.domElement);

    const controls = new OrbitControls(this.camera, this.renderer.domElement);
    // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
    controls.addEventListener('change', this.render.bind(this)); //监听鼠标、键盘事件
    this.container.onmousedown = this.hightLight.bind(this); // 监听鼠标、键盘事件

    // const animation = () => {
    //   // mesh.position.x -= 1;
    //   // mesh.rotation.x -= 0.05;
    //   // mesh.rotation.y -= 0.05;
    //   // mesh.rotation.z -= 0.05;
    //   this.renderer.render(scene, this.camera);
    //   requestAnimationFrame(animation);
    // };
    // animation();
  }

  mousedown(event) {
    this.downObj = {
      x: event.offsetX,
      y: event.offsetY,
    };
    // console.log(this.downObj);
  }
  //

  hightLight(event) {
    const x = event.clientX;
    const y = event.clientY;
    // if (Math.abs(x - this.downObj.x) > 5 || Math.abs(y - this.downObj.y) > 5) {
    //   return;
    // }
    this.mouse.x = (x / this.container.clientWidth) * 2 - 1;
    this.mouse.y = -(y / this.container.clientHeight) * 2 + 1;
    this.raycaster.setFromCamera(this.mouse, this.camera);
    const intersects = this.raycaster.intersectObjects(
      this.scene.children,
      true
    );
    if (this.INTERSECTED) {
      this.INTERSECTED.material.color.setHex(this.INTERSECTED.currentHex);
      this.INTERSECTED.material.opacity = 0.6;
    }
    this.INTERSECTED = null;
    if (intersects.length > 0) {
      // 将拾取到的模型设为高亮
      this.INTERSECTED = intersects[0].object;
      // 保存高亮模型原本颜色
      this.INTERSECTED.currentHex = this.INTERSECTED.material.color.getHex();
      this.INTERSECTED.material.color.setHex(0x0000ff);
      this.INTERSECTED.material.opacity = 1;
    } else {
    }
    this.renderer.render(this.scene, this.camera); // 执行渲染操作
  }

  render() {
    this.renderer.render(this.scene, this.camera);
  }

  dispose() {
    //
    this.renderer.domElement.remove();
    this.renderer.dispose();
  }
}
